<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title th:text="#{system.name}">index</title>
    <link th:href="@{/webjars/bootstrap/5.2.3/css/bootstrap.css}"
          href="../static/bootstrap-5.3.0/css/bootstrap.css" rel="stylesheet"/>

    <script th:src="@{/webjars/jquery/3.6.4/jquery.min.js}" src="../static/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>

<div class="container text-center">
    <div class="row">
        <div class="col"></div>
        <div class="col ">

            <div class="blank h-75"></div>

            <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wySn?ver=3568"
                 class="rounded mx-auto" width="200px" height="200px" alt="图片加载失败">
            <form th:action="@{/thymeleaf/table}">
                <div class="mb-3 text-start">
                    <label for="username" class="form-label" th:text="#{login.username.tip}">用户名 </label>
                    <input type="email" class="form-control" id="username" aria-describedby="emailHelp">
                </div>
                <div class="mb-3 text-start">
                    <label for="password" class="form-label" th:text="#{login.password.tip}">密码</label>
                    <input type="password" class="form-control" id="password">
                </div>
                <div class="mb-3 form-check text-start">
                    <input type="checkbox" class="form-check-input" id="remember-me">
                    <label class="form-check-label" for="remember-me" th:text="#{login.remember-me.tip}">记住我</label>
                </div>
                <button type="submit" class="btn btn-primary w-25" th:text="#{login.btn.tip}" id="loginBtn">登录</button>
            </form>

            <!--  引入语言组件-->
            <div class="language fixed-bottom mb-3" th:insert="~{component::#language}"></div>
            <!--引入版权信息
                此处使用 insert 将会保留根节点
                   使用 replace 将不保留根节点
            -->
            <footer th:insert="footer.html" class="fixed-bottom"></footer>
        </div>
        <div class="col"></div>
    </div>
</div>

</body>

<script>

    // 此处使用jq 跳转 前提是 btn type 为 button 是 submit 则使用form 的action事件
    $(document).ready(function () {
        $("#loginBtn").click(function (){
            window.location.href="/thymeleaf/table";
        })
    })


</script>


</html>